
import { mapGetters, mapActions } from 'vuex'
import models from '../../components/models.vue'
import modelchoose from '../components/modelChoose.vue'
import drag from '../../components/drag.vue'

export default {
  data () {
    return {
      x:0,
      y:0,
      modals: [
        {}
      ],
      types:{
        'list':{
          types:'',
          title:'',
          class:'',
          disable:true
        },
        1:{
          type:1,
          title:'test',
          img:''
        },
        2:{
          type:2,
          title:'test',
          html:'',
          types:1,
          img:''
        },
        3:{
          type:3,
          placeholder:'test',
          types:1
        },
        4:{
          type:4,
          title:'test',
          list:[''],
          bindList:1,
          types:1,
          class:1
        },
        5:{
          type:5,
          title:'test',
          url:''
        },
        6:{
          type:6,
          title:'test',
          html:'这里添加内容'
        },
        7:{
          type:7,
          title:'test',
          html:'这里添加内容'
        },
        8:{
          type:8,
          banner:[
            {img:'',url:'',title:'',enabled:true},
            {img:'',url:'',title:'',enabled:false},
            {img:'',url:'',title:'',enabled:false},
            {img:'',url:'',title:'',enabled:false},
            {img:'',url:'',title:'',enabled:false},
            {img:'',url:'',title:'',enabled:false},
            {img:'',url:'',title:'',enabled:false}
          ]
        },

      },
      data:{},
      ind:'',
      dragId:0,
      dragIndex:0,
      dragStop:false,
    }
  },
  methods: {
    move () {
      this.x = event.x
      this.y = event.y
      this.setIndex()
    },
    leave () {
      this.$refs.drag[this.dragId].leaveNode(1)
    },
    lose () {
      debugger
      this.ind = ''
      this.dragStop = false
      let m = [...this.modals]
      m[this.dragIndex] = this.modals[this.dragId]
      m[this.dragId] = this.modals[this.dragIndex]
      debugger
      this.modals = [...m]
    },
    getId (id) {
      this.dragStop = true
      this.dragId = id
    },
    setIndex () {
      if(this.dragStop){
        let drags = $('.content-box'),len = drags.length, vm = this
        for(let i = 0; i < len; i++){
          if(this.y < 60){
            vm.dragIndex = 0
          }else if(this.y > drags.eq(i).offset().top){
            vm.dragIndex = i
          }
        }
      }
    },

    ...mapActions([
      'toggleSidebarls',
      'toggleSidebars',
    ]),

    choose (type,ind) {
      let vm = this, m = [...vm.modals]
      m[ind] = {...vm.types[type]}
      vm.modals = m
      this.setModal(vm.modals)
    },

    hides () {
      if(!this.dragStop) {
        $(event.currentTarget).find('.handle-box').stop(true, true).hide()
      }
    },

    shows () {
      if(!this.dragStop) {
        $(event.currentTarget).find('.handle-box').stop(true, true).show()
      }
    },

    update (ind) {
      let vm = this
      this.toggleSidebarls(false)
      this.$parent.$parent.$refs.sides.update(vm.modals,ind)
    },

    modify (ind) {
      let vm = this
      vm.ind = ind
    },

    add (ind) {
      let vm = this
      if(vm.ind>ind){
        vm.ind +=1
      }
      this.modals.splice(ind+1,0,{})
      this.setModal(vm.modals)
    },

    remove (ind) {
      let vm = this
      if(vm.modals.length > 0){
        if(vm.ind>ind){
          vm.ind -=1
        }else if(vm.ind == ind){
          vm.ind = ""
        }
        this.modals.splice(ind,1)
        this.setModal(vm.modals)
      }
    },
    setModal (data) {
      this.modals = data
    },
    savePage () {

    }
  },
  computed:  mapGetters({
    sidebar: 'sidebar',
    sidebarl: 'sidebarl',
    tpl: 'tpl'
  }),
  components: {models,modelchoose,drag},
  mounted () {
    let vm = this
    this.setModal(vm.modals)
    vm.toggleSidebars(true)
    vm.$parent.$parent.$refs.nav.status = true
    vm.$parent.$parent.$refs.nav.save = vm.savePage
  }
}
